<template>
	<view class="box ">
		<!-- 经纪人离职分配 -->
		<view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
			<image class="image1" @click="fanhui" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />
			<text>
				帮友俱乐部
			</text>
			<view class="bang-club-scan">
				<image src="" mode="" style="width: 100%;height: 100%;"></image>
			</view>


		</view>
		<view class="bang-club-main">
			<swiper :indicator-dots="false" previous-margin='22px' next-margin='11px' :autoplay="false" :interval="3000"
				:duration="1000">
				<swiper-item class="" v-for="(item,index) in swiperList">
					<view class="bang-club-swiper-item" >
						<image src="https://pic.bangbangtongcheng.com/static/member/bang-swiper-bg.png" mode="" class="bang-swiper-bg"></image>
						<view class="bang-swiper-rule">
							<view class="bang-swiper-rule-l">
								<image src="../static/bg.jpg" mode="aspectFill" width="36rpx" ></image>
							</view>
							等级规则
						</view>
						<view class="bang-club-t">
							<view class="bang-club-tl">
								<image src="../static/bg.jpg" style="width: 80rpx;height: 80rpx;" mode="aspectFill"></image>
							</view>
							<view class="bang-club-tr">
								<view :style="'color:'+item.levelLabelColor" class="bang-club-trt text-cut">密密有限公司，您好！</view>
								<view class="bang-club-trb text-cut" :style="'color:'+item.levelLabelColor">您的帮帮豆余额：50</view>
							</view>
						</view>
						<view class="bang-club-b">
							<view class="bang-club-bt">
								<view class="bang-club-bt-line" >

								</view>
								<view class="bang-club-bt-line-fill" :style="'background-color:'+item.levelLineColor">

								</view>
							</view>
							<view class="bang-club-bb">
								<view class="bang-club-bb-left" :style="'color:'+item.levelLabelColor">
								{{item.levelLabel}}
								</view>
								<view class="bang-club-bb-right" :style="'color:'+item.levelLabelColor">
								距离升级还差410帮帮豆
								</view>


							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="bang-club-swiper-item"></view>
				</swiper-item>
				<swiper-item>
					<view class="bang-club-swiper-item"></view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	export default {
		computed: {
			...mapGetters(["statusBarHeight1", "userinfo"])
		},
		data() {
			return {
				swiperList: [{
					bgc: 'linear-gradient(270deg, #8291A7 0%, #B8C4D4 100%',
					levelLabel: '白银会员',
					levelLabelColor: '#42638D',
					levelLineColor: '#4D6B93',

				}, {
					bgc: 'linear-gradient(270deg, #8291A7 0%, #B8C4D4 100%',
					levelLabel: '白银会员',
					levelLabelColor: '#42638D',
					levelLineColor: '#4D6B93',
				}]
			};
		},
		methods: {
			fanhui() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bang-club-scan {
		position: absolute;
		bottom: 15rpx;
		right: 30rpx;
		width: 56rpx;
		height: 56rpx;
		background-color: white;
	}

	.bang-club-main {
		width: 750rpx;
		height: 400rpx;
		background: linear-gradient(180deg, #64B6A8 0%, #64B6A8 100%);
		opacity: 1;
		margin-top: -32rpx;
		padding-top: 32rpx;
		display: flex;
		align-items: center;

		swiper {
			width: 100%;
			height: 320rpx;
		}

		.bang-club-swiper-item {
			position: relative;
			width: 664rpx;
			height: 320rpx;
			background: linear-gradient(270deg, #8291A7 0%, #B8C4D4 100%);
			border-radius: 25rpx 25rpx 25rpx 25rpx;
			opacity: 1;
			padding: 40rpx 40rpx 32rpx 40rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			overflow: hidden;
			.bang-swiper-rule{
				display: flex;
				align-items: center;
				position: absolute;
				top: 40rpx;
				right: 0;
				width: 160rpx;
				height: 46rpx;
				background: #FFFFFF;
				border-radius: 23rpx 0rpx 0rpx 23rpx;
				opacity: 1;
				
				
				font-size: 24rpx;
				font-weight: normal;
				color: #64B6A8;
				line-height: 34rpx;
				
				.bang-swiper-rule-l{
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					background: #64B6A8;
					opacity: 1;
					margin-left: 3rpx;
					margin-right: 4rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						height: 36rpx;
						border-radius: 50%;
					}
				}
			}
			.bang-swiper-bg{
				position: absolute;
				width:315rpx;
				height: 315rpx;
				left: 458rpx;
				top: 84rpx;
			
			}
			.bang-club-t{
				display: flex;
				.bang-club-tl{
					image{
						border-radius: 50%;
					}
				}
				.bang-club-tr{
					padding:9rpx 0 9rpx 12rpx;
					width:384rpx;
					.bang-club-trt{
						margin-bottom: 12rpx;
						font-size: 28rpx;
						font-weight: 400;
						line-height: 28rpx;
					}
					.bang-club-trb{
						font-size: 22rpx;
						font-weight: normal;
						line-height: 22rpx;
					}
				}
			}
			.bang-club-b {
				position: relative;
				z-index:2;
				.bang-club-bt {
					margin-bottom:22rpx;
					height: 10rpx;
					position: relative;
					.bang-club-bt-line{
						width: 100%;
						height: 100%;
						background: #FFFFFF;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						opacity: 0.5;
					}
					.bang-club-bt-line-fill{
						position: absolute;
						left: 0;
						top: 0%;
						width: 50%;
						height: 100%;
						background: #4D6B93;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						
					}
				}
				.bang-club-bb{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.bang-club-bb-left{
						font-size: 36rpx;
						font-weight: 400;
						line-height: 36rpx;
					}
					.bang-club-bb-right{
						font-size: 24rpx;
						
						font-weight: 400;
						line-height: 34rpx;
					}
				}
			}
		}
	}











	.box {
		width: 100%;
		min-height: 100vh;
		// padding-bottom: 130rpx;
		background-color: #fff;
	}

	.tou {
		position: relative;
		width: 100%;
		// height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
		color: #fff;
		background-color: #64b6a8;

		.image1 {
			position: absolute;
			width: 32rpx;
			height: 32rpx;
			// top: 116rpx;
			left: 30rpx;
		}

		.image2 {
			position: absolute;
			width: 56rpx;
			height: 56rpx;
			// top: 104rpx;
			right: 30rpx;
		}

		p {
			position: absolute;
			// top: 90rpx;
			line-height: 45rpx;
			bottom: 21rpx;
			right: 30rpx;
			font-size: 32rpx;
			color: #fff;
		}
	}



</style>